<!--  -->
<template>
  <div>
    <el-row>
      <el-col :span="24" class="page_box_top">
        <div class="but">
          <i class="el-icon-s-fold"></i>
          <el-breadcrumb separator="/" class="page_box_top_nav">
            <el-breadcrumb-item class="breadcrumb_active_item">会员管理</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ name: 'signlist' }">团体会员列表详情</el-breadcrumb-item>
            <el-breadcrumb-item>查看详情</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <el-button type="danger" size="mini" @click="backBtn()">返回</el-button>
      </el-col>
    </el-row>
    <el-form :model="dialogForm" :disabled="editKey == 1">
      <el-form-item label="图片:" prop="avatar" label-width="100px">
        <el-image fit="cover" :src="dialogForm.avatar" class="avatar" />
      </el-form-item>
      <el-form-item label="公司名称:" prop="company_name" :label-width="formLabelWidth">
        <el-input v-model="dialogForm.company_name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="公司简称:" prop="title" :label-width="formLabelWidth">
        <el-input v-model="dialogForm.company_simple_name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="会员简介:" prop="title" :label-width="formLabelWidth">
        <el-input v-model="dialogForm.detail" type="textarea" autosize rows="6"
          autocomplete="off" />
      </el-form-item>
      <el-form-item label="联系人姓名:" prop="title" :label-width="formLabelWidth">
        <el-input v-model="dialogForm.contact_name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="联系人电话:" prop="title" :label-width="formLabelWidth">
        <el-input v-model="dialogForm.contact_phone" autocomplete="off" />
      </el-form-item>
      <el-form-item label="审核人员:" prop="title" :label-width="formLabelWidth">
        <el-input v-model="dialogForm.audit_name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="邮寄地址:" prop="title" :label-width="formLabelWidth">
        <el-input v-model="dialogForm.address" autocomplete="off" />
      </el-form-item>
      <el-form-item label="审核状态:" prop="title" :label-width="formLabelWidth">
        <el-input v-model="dialogForm.audit_status" autocomplete="off" />
      </el-form-item>
      <el-form-item label="审核意见:" prop="title" :label-width="formLabelWidth">
        <el-input v-model="dialogForm.audit_opinion" autocomplete="off" />
      </el-form-item>
      <div class="divs">
        <el-form-item label="登记表:" prop="avatar" label-width="100px">
          <p @click="downPDF" type="text" class="pdf">下载PDF</p>
          <p @click="showPDF" type="text" class="pdf">预览PDF</p>
        </el-form-item>
        <el-form-item label="营业执照:" prop="avatar" label-width="100px">
          <el-image fit="cover" :src="dialogForm.business_license_image"
            :preview-src-list="[dialogForm.business_license_image]" class="avatar" />
        </el-form-item>
        <el-form-item label="付款凭证:" prop="avatar" label-width="100px">
          <el-image fit="cover" :src="dialogForm.pay_image"
            :preview-src-list="[dialogForm.pay_image]" class="avatar" />
        </el-form-item>
        <el-form-item label="电子凭证:" prop="avatar" label-width="100px">
          <el-image fit="cover" :src="dialogForm.certificate" class="avatar" />
        </el-form-item>
      </div>
    </el-form>

    <div class="exam_from_btn_box"></div>
  </div>
</template>

<script>
export default {
  name: "",
  data () {
    return {
      dialogForm: {},
      formLabelWidth: "100px",
      editKey: 1,
    };
  },
  mounted () {
    this.singform();
    this.editKey = this.$route.query.key;
  },
  methods: {
    // 详情列表
    singform () {
      //   console.log(this.$route.query.id, "sjdjs");
      let url = "/admin/associationvip/show";
      let data = {
        id: this.$route.query.id,
      };
      this.axios.post(url, data).then((res) => {
        if (res.code == 0) {
          console.log(res);
          this.dialogForm = res.record;
          if (this.dialogForm.audit_status == 1) {
            this.dialogForm.audit_status = "审核中 ";
          } else if (this.dialogForm.audit_status == 2) {
            this.dialogForm.audit_status = "审核通过";
          } else if (this.dialogForm.audit_status == 3) {
            this.dialogForm.audit_status = "待重新提交";
          }
        }
      });
    },

    // 下载PDF
    downPDF () {
      if (this.dialogForm.register_info_image == '' || this.dialogForm.register_info_image == null) {
        this.$message.warning('暂无可下载的PDF')
        return
      }
      let xhr = new XMLHttpRequest();
      xhr.open('GET', this.dialogForm.register_info_image, true);
      xhr.responseType = 'blob';
      xhr.onload = () => {
        if (xhr.status == 200) {
          const blob = xhr.response;
          const link = document.createElement('a');
          let fileName = this.dialogForm.register_info_image.split("/").pop();
          // link.style.display = 'none';
          link.href = window.URL.createObjectURL(blob);
          const fname = fileName; // 下载文件的名字
          link.setAttribute('download', fname);
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
        }
      }
      xhr.send();

    },
    // 预览PDF
    showPDF () {
      window.open(this.dialogForm.register_info_image);
    },

    // 返回上一页
    backBtn () {
      this.$router.replace({
        name: "group",
      });
    },
  },
};
</script>

<style scoped>
.avatar {
  width: 200px;
  height: 200px;
}
/* .exam_from_btn_box {
  width: 100%;
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  bottom: 0;
  left: 0;
  padding: 10px 0;
  border-top: 1px solid #dddddd;
  background-color: #fff;
} */
.page_box_top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.block {
  display: flex;
  line-height: 40px;
}

.el-input__inner {
  width: 220px;
}
.divs {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.pdf {
  border-color: transparent;
  color: #409eff;
  background: transparent;
  padding-left: 0;
  padding-right: 0;
}
.pdf:hover {
  box-shadow: 0 0 8px 0 rgba(232, 237, 250, 0.6),
    0 2px 4px 0 rgba(232, 237, 250, 0.5);
  cursor: pointer;
}
</style>